<template>
  <div class="admin-container">
    <!-- 搜索框 -->
    <div class="search-container">
      <div class="top">
        <div class="top-left">
          <el-icon>
            <Search />
          </el-icon>
          <span>筛选搜索</span>
        </div>
        <div class="top-right">
          <!-- 重置  查询搜索 按钮 -->
          <el-button @click="resetQueryList">重置</el-button>
          <el-button type="primary" @click="queryList">查询搜索</el-button>
        </div>
      </div>
      <div class="bottom">
        <div class="text">品牌名称:</div>
        <el-input v-model="searchParams.brandName" placeholder="品牌名称" />

        <!-- 选择 -->
        <div class="text">推荐状态</div>
        <el-select
          v-model="searchParams.recommendVal"
          class="m-2"
          placeholder="全部"
          size="large"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
    <!-- 数据列表 ---- 添加按钮 -->
    <div class="btn-container">
      <div class="left">
        <el-icon size="18">
          <Tickets />
        </el-icon>
        <span>数据列表</span>
      </div>
      <!-- 添加按钮 -->
      <!-- v-if 根据 权限列表来显示  如果用户没有这个权限  将不显示添加按钮 -->
      <el-button @click="changeSelect">选择品牌</el-button>
    </div>
    <!-- 表格 -->
    <div class="table-container">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="编号" />
        <el-table-column prop="brandName" label="品牌名称" />
        <el-table-column label="是否推荐">
          <template #default="{ row }">
            <el-switch
              v-model="row.recommendStatus"
              :active-value="1"
              :inactive-value="0"
              @click="ChangeStatus(row)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" />
        <el-table-column prop="sort" label="状态">
          <template #default="{ row }">
            {{ row.recommendStatus == 1 ? "推荐中" : "未推荐" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="{ row }">
            <el-button link type="primary" size="small" @click="showSort(row)"
              >设置排序</el-button
            >
            <el-button link type="primary" size="small" @click="delTab(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div>
      <!-- 底下操作是否推荐 -->
      <el-select
        v-model="recommendVal"
        class="m-2"
        placeholder="批量操作"
        size="large"
      >
        <el-option
          v-for="item in recommendOption"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button type="primary" @click="hdCLlick">确定</el-button>
    </div>
    <!-- 分页器 组件 -->
    <div class="pagination-box">
      <el-pagination
        v-model:current-page="paginationParams.currentPage"
        v-model:page-size="paginationParams.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paginationParams.total"
        :background="true"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>

  <!-- 设置排序模态窗 -->
  <smsSort
    :dialogSortVisible="dialogSortVisible"
    @cancel="cancelFn"
    @confirm="confirmFn"
    :id="rid"
    :sort="sorts"
  />

  <!-- 设置添加的模态框 -->
  <smsSelect
    :dialogSelectVisible="dialogSelectVisible"
    @cancel="cancelSelFn"
    @confirm="confirmSelFn"
  />
</template>

<script setup lang="ts">
import MultiSel from "@/hooks/components/useMultiSel";
import * as http from "@/request/http";
import { ref, reactive } from "vue";
import smsSelect from "./smsSelect.vue";
import { Search, Tickets } from "@element-plus/icons-vue";
import useTable from "@/hooks/components/useTable";
// import { useUserStore } from "@/store/userStore";
import smsSort from "./smsSort.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import useSwitch from "@/hooks/components/useSwitch";

// const userStore = useUserStore();
// 查询参数对象   keyword关键字
const searchParams = reactive({
  brandName: "",
  recommendVal: "",
});

const options = [
  {
    value: "未推荐",
    label: "未推荐",
  },
  {
    value: "推荐中",
    label: "推荐中",
  },
];
const recommendVal = ref();

const recommendOption = [
  {
    value: 1,
    label: "设为推荐",
  },
  {
    value: 0,
    label: "取消推荐",
  },
  {
    value: 3,
    label: "删除",
  },
];

// 调用useTable函数  实现table数据渲染 以及 分页器功能
const {
  tableData,
  paginationParams,
  handleCurrentChange,
  handleSizeChange,
  queryList,
} = useTable(http.sms.homeBrandList, searchParams);

// 选中的
const multipleSelection = ref<number[]>([]);
// 多选
const handleSelectionChange = (val: BrandModel[]) => {
  // multipleSelection.value = val;
  multipleSelection.value = val.map((item: { id: number }) => item.id);
  // console.log(multipleSelection.value);
};

// 点击是否推荐
const ChangeStatus = (row: BrandModel) => {
  const ids = [row.id];
  ElMessageBox.confirm("是否要修改推荐状态?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      http.sms
        .brandUpdateRecStatus(ids, row.recommendStatus)
        .then((res) => {
          if (res.code === 200) {
            ElMessage.success("更改成功");
            queryList();
          } else {
            row.recommendStatus = row.recommendStatus == 1 ? 0 : 1;
          }
        })
        .catch(() => {
          row.recommendStatus = row.recommendStatus == 1 ? 0 : 1;
          ElMessage.error("修改失败");
        });
    })
    .catch(() => {
      ElMessage.success("取消更改");
    });
};

// 封装的批量多选
const hdCLlick = () => {
  MultiSel(
    multipleSelection.value,
    recommendVal.value,
    http.sms.brandUpdateRecStatus,
    http.sms.brandDelete,
    queryList
  );
};

// 点击删除
const delTab = (id: number) => {
  const ids = [id];
  ElMessageBox.confirm("是否要删除??", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      http.sms.brandDelete(ids).then((res) => {
        if (res.code === 200) {
          queryList();
          ElMessage.success(" 删除成功");
        }
      });
    })
    .catch(() => {});
};

// // // 多选按钮 封装
// const MultiSelChange = () => {
//   // console.log("选中的", multipleSelection.value);
//   // console.log("条件", recommendVal.value);
//   const arr = multipleSelection.value;
//   const str = recommendVal.value;
//   if (arr.length === 0) {
//     ElMessage.warning("请选择一条记录");
//     return;
//   }
//   ElMessageBox.confirm(
//     str === 3 ? "是否要删除该推荐?" : "是否要修改推荐状态?",
//     "提示",
//     {
//       confirmButtonText: "确定",
//       cancelButtonText: "取消",
//       type: "warning",
//     }
//   )
//     .then(() => {
//       if (arr.length !== 0 && str !== 3) {
//         http.sms.brandUpdateRecStatus(arr, str).then((res) => {
//           if (res.code === 200) {
//             queryList();
//             ElMessage.success(" 修改成功");
//           }
//         });
//       } else if (arr.length !== 0 && str == 3) {
//         http.sms.brandDelete(arr).then((res) => {
//           if (res.code === 200) {
//             console.log(1);
//             queryList();
//             ElMessage.success(" 删除成功");
//           }
//         });
//       }
//     })
//     .catch(() => {});
// };

// 重置
const resetQueryList = () => {
  (searchParams.brandName = ""), (searchParams.recommendVal = "");
};

// 操作设置-----------------------排序模态窗
// 显示和隐藏
const dialogSortVisible = ref(false);

// 排序取消
const cancelFn = () => {
  dialogSortVisible.value = false;
};
// 排序点击确定
const confirmFn = (newSort: number) => {
  console.log("返回来的数据", newSort);
  ElMessageBox.confirm("是否要修改排序??", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      useSwitch(http.sms.updateSort, sorts.value, rid.value, newSort);
      dialogSortVisible.value = false;
      queryList();
    })
    .catch(() => {});
};

let sorts = ref<number>(0);
let rid = ref<number>(0);
// 显示时传送id以及sort
// 显示/showSort
const showSort = (row: BrandModel) => {
  rid.value = row.id;
  sorts.value = row.sort;
  dialogSortVisible.value = true;
};

// --------------------------------------------设置添加的模态框

const dialogSelectVisible = ref(false);

const cancelSelFn = () => {
  dialogSelectVisible.value = false;
};
// 点解肯定
const confirmSelFn = () => {
  dialogSelectVisible.value = false;
};

// 选择品牌
const changeSelect = () => {
  dialogSelectVisible.value = true;
};
</script>
<!-- 样式 -->
<style scoped lang="less">
.admin-container {
  background-color: #fff;

  // 搜索框
  .search-container {
    padding: 20px;
    box-shadow: 0 2px 12px 1px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    display: flex;
    flex-direction: column;

    .top {
      display: flex;
      justify-content: space-between;

      .top-left {
        display: flex;
        align-items: center;

        span {
          margin-left: 15px;
        }
      }
    }

    .bottom {
      display: flex;
      align-items: center;
      width: 100%;
      margin-left: 8%;
      .el-input {
        width: 300px;
      }
    }
  }

  // 添加按钮
  .btn-container {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    margin: 20px 0;
    box-shadow: 0 2px 12px 1px rgba(0, 0, 0, 0.1);
    border-radius: 4px;

    .left {
      display: flex;
      align-items: center;

      span {
        margin-left: 10px;
      }
    }
  }

  // 表格
  // .table-container {}

  // 分页器
  .pagination-box {
    display: flex;
    flex-direction: row-reverse;
    margin: 20px 0;
  }
}
</style>
